import { AppBar, Paper, Tab, Tabs } from "@material-ui/core";
import * as React from "react";
import MilsymbolGridList from "./milsymbolGridList";
import MilSymbolSearch from './milsymbolSearch';
import { AffiliationKey, Affiliations, ms2525cSchema, MS2525CUtil, SchemaType, SchemaTypeKey, StatusKey, SymbolStatus, SymbolTypeItem } from './milsymbolWrapper';
export interface IMilSymbolBrowerProps {
  width?: number | string;
  iconSize?: number;
  cols?: number;  
  onImgClick?:any;
}

export interface SymbolInfo{
  label:string;
  sidc:string;
  url:string;
}

export interface IMilSymbolBrowerState {
  affiliationTabValue:number;
  schemaTypeTabValue:number;
  schemaKeyTabValue:number;
  SymbolStatusTabValue:number;
  currentSymbol:SymbolInfo;
}

export default class MilSymbolBrowser extends React.Component<
  IMilSymbolBrowerProps,
  IMilSymbolBrowerState
> {
  static defaultProps = {
    width: 280,
    iconSize: 40,
    cols: 5,
  };  
  constructor(props: IMilSymbolBrowerProps) {
    super(props);

    this.state = {
      affiliationTabValue: 0,
      schemaTypeTabValue: 0,
      schemaKeyTabValue: 0,
      SymbolStatusTabValue: 0,
      currentSymbol:{
        label:'',
        sidc:'',
        url:''
      }      
    };
  }

  handleTabChange = (event: React.ChangeEvent<{}>, newValue: number) => {   
    this.setState({affiliationTabValue:newValue});
  };
  handleSchemaTypeTabChange = (event: React.ChangeEvent<{}>, newValue: number) => {   
    this.setState({schemaTypeTabValue:newValue});
    this.setState({schemaKeyTabValue:0});
  };
  handleSchemaKeyTabChange = (event: React.ChangeEvent<{}>, newValue: number) => {   
    this.setState({schemaKeyTabValue:newValue});
  };
  handleSymbolStatusTabChange = (event: React.ChangeEvent<{}>, newValue: number) => {   
    this.setState({SymbolStatusTabValue:newValue});
  };

  render() {
    const {affiliationTabValue,schemaTypeTabValue,schemaKeyTabValue,SymbolStatusTabValue,currentSymbol} = this.state;
    const schemaKey:SchemaType=Object.keys(ms2525cSchema)[schemaTypeTabValue] as SchemaType;
    const schemaTypeArray:SymbolTypeItem[] = MS2525CUtil.getSymbolTypeArray(schemaKey);
    const { width, iconSize, cols, onImgClick } = this.props;
    return (
      <React.Fragment>
        <Paper square style={{ flexGrow: 1, maxWidth: `${width}px`}}>
        <AppBar position="static" style={{ color:'white'}}>
          <Tabs
            // variant="scrollable" 
            variant="fullWidth"  
            value={affiliationTabValue}
            onChange={this.handleTabChange}            
            indicatorColor="secondary"          
          >
            <Tab label='搜索' />
            {
              Affiliations.Default.map(affiliation => { return <Tab key={affiliation.key} label={affiliation.name} style={{ minWidth: `${100 /(1 + Affiliations.Default.length)}%` }}/>})
            }
          </Tabs>
          </AppBar>
            {
              affiliationTabValue === 0?
              <MilSymbolSearch  width={560} cols={10} onImgClick={(event,item) =>onImgClick(event,item)}/>
              :
              <React.Fragment>
              <Tabs
              variant="fullWidth"   
              value={schemaTypeTabValue}
              onChange={this.handleSchemaTypeTabChange}
              indicatorColor="secondary"
              textColor="secondary" 
            >         
              {
                Object.keys(ms2525cSchema).map(key => { return <Tab key={key} label={Reflect.get(ms2525cSchema,key)}  style={{ minWidth: `${100 / Object.keys(ms2525cSchema).length}%` }}/>})
              }
            </Tabs>
              <Tabs
                variant="scrollable"
                scrollButtons="auto"        
                value={schemaKeyTabValue}
                onChange={this.handleSchemaKeyTabChange}
                indicatorColor="secondary"
                textColor="secondary"
              >         
                {
                  schemaTypeArray.map(schemaType => { return <Tab key={schemaType.key} label={schemaType.name}  style={{ minWidth: `${100 / schemaTypeArray.length}%` }}/>})
                }
              </Tabs>
              <Tabs
                variant="fullWidth"          
                value={SymbolStatusTabValue}
                onChange={this.handleSymbolStatusTabChange}
                indicatorColor="secondary"
                textColor="secondary"
              >         
                {
                  SymbolStatus.Default.map(item => { return <Tab key={item.key} label={item.name}  style={{ minWidth: `${100 / SymbolStatus.Default.length}%` }}/>})
                }
              </Tabs>   
              <div style={{ padding: 15 }}>       
              <MilsymbolGridList
                          width={width}
                          iconSize={iconSize}
                          cols={cols}
                          symbolStatus={SymbolStatus.Default[SymbolStatusTabValue].key as StatusKey}
                          affiliation={Affiliations.Default[affiliationTabValue - 1].key as AffiliationKey}
                          schemaType={Object.keys(ms2525cSchema)[schemaTypeTabValue] as SchemaType}
                          schemaKey={schemaTypeArray[schemaKeyTabValue].key as SchemaTypeKey}
                          onImgClick={(event,item) =>onImgClick(event,item)}
              /> 
              </div>    
              </React.Fragment> 
            }
          {/* <div>
            {
              schemaTypeArray.map(schemaType => {
                return (
                <Accordion  TransitionProps={{ unmountOnExit: true }}>
                  <AccordionSummary
                    expandIcon={<ExpandMoreIcon />}
                    aria-controls="panel1a-content"
                    id="panel1a-header"
                  >
                    <Typography >{schemaType.name}</Typography>
                  </AccordionSummary>
                  <AccordionDetails>
                    <MilsymbolGridList
                      width={560}
                      iconSize={40}
                      cols={10}
                      affiliation={['F','H','U'][affiliationTabValue] as AffiliationKey}
                      schemaType={Object.keys(ms2525cSchema)[schemaTypeTabValue] as SchemaType}
                      schemaKey={schemaType.key as SchemaTypeKey}
                    />
                  </AccordionDetails>
                </Accordion>
                )                   
              })
            }
          </div> */}
        </Paper>
      </React.Fragment>
    );
  }
}

